<template>
  <div class="tabbars">
    <div class="item" v-for="(item,index) in path" :key='index' @click.stop="jump(item.path,index)" :style="index==indexs?'color:#2E7FC1;':'color:#000;'">
      <i :class="'iconfont icon-'+item.icon"></i>
      <span>{{item.title}}</span>
    </div>
  </div>
</template>

<script>
  export default{
     props:['indexs'],
    data(){
      return{
        path:[
          
         {
            title:"全部",
            icon:"qita",
            path:'/qita',
            big:false,
          },
          {
            title:"添加",
            icon:"tianjia",
            path:'/add_diary',
            big:false,
          },
          {
            title:"聊天室",
            icon:"hezuo",
            path:'/talk',
            big:false,
          },

          {
            title:"我的",
            icon:"my",
            path:'/my',
            big:false,
          },

        ],
        title_color:"#000000",
        select_color:"#2E7FC1",
      }
    },
    methods:{
      jump(path,index){
        
          this.$router.push(path)
        
        
      }
    }
  }
</script>

<style lang="less" scoped>
  .tabbars{
    width: 100%;
    height: 121rem;
    background-color: #fff;
    box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(206, 206, 206, 0.5);
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0px;
    left: 0px;
  }
  i{
    margin-bottom: 10rem;
    font-size: 40rem;
  }
  .item{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;
    font-size: 27rem;
  }
  .big_icon{
    width: 119px;
    height: 119px;
    margin-top: -60px;
  }
</style>
